<div>
  <ng-content select="[data-pagination-additional='true']"></ng-content>
  <ul [ngClass]="pageClassConfig">
    <li [class.disabled]="currentPageNum <= 1"
        [attr.style.display]="(!firstPageShow) ? 'none' : ''"
        (click)="pageNavigation(1)">
      <a href="javascript:void(0)">{{firstPageText}}</a>
    </li>
    <li [class.disabled]="currentPageNum <= 1" (click)="prevPageNavigation()">
      <a href="javascript:void(0)">{{prevPageText}}</a>
    </li>
    <li
      *ngFor="let i of pagesShowList"
      (click)="pageNavigation(i)" [class.active]="i === currentPageNum">
      <a href="javascript:void(0)">{{i}}</a>
    </li>
    <li [class.disabled]="currentPageNum === totalPages" (click)="nextPageNavigation()">
      <a href="javascript:void(0)">{{nextPageText}}</a>
    </li>
    <li [class.disabled]="currentPageNum === totalPages"
        [attr.style.display]="(!lastPageShow) ? 'none' : ''"
        (click)="pageNavigation(totalPages)">
      <a href="javascript:void(0)">{{lastPageText}}</a>
    </li>
  </ul>
</div>
